<template>
  <div class="task-container">
    <!-- 任务列表头部 -->
    <div class="task-header">
      <div class="task-info">
        <div class="task-title">
          <h2>成熟点云拉框人力——图片标注类</h2>
          <div class="task-meta">
            <span>名额：20/20</span>
            <span>任务量：800000/10000000</span>
            <span>工期：2025/2/14——2025/5/15</span>
          </div>
        </div>
        <div class="task-details">
          <span>项目组长：小b</span>
          <span>联系方式：187********</span>
          <span>我的任务：150/20000</span>
        </div>
      </div>
      <button class="start-btn">开始标注</button>
    </div>

    <!-- 任务列表筛选 -->
    <div class="task-filter">
      <div class="filter-group">
        <span>任务类型：</span>
        <select>
          <option value="all">全部</option>
        </select>
      </div>
      <div class="filter-group">
        <span>状态：</span>
        <select>
          <option value="all">全部</option>
        </select>
      </div>
      <input type="text" placeholder="请输入任务名称" class="search-input">
    </div>

    <!-- 任务列表表格 -->
    <div class="task-table">
      <table>
        <thead>
          <tr>
            <th>No</th>
            <th>项目编号</th>
            <th>项目名称</th>
            <th>任务期限</th>
            <th>标注数量</th>
            <th>任务状态</th>
            <th>任务评分</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>#654821</td>
            <td>安全帽标注</td>
            <td>1.1-1.3</td>
            <td>200/200</td>
            <td><span class="status completed">已完成</span></td>
            <td>10</td>
          </tr>
          <tr>
            <td>2</td>
            <td>#654821</td>
            <td>安全帽标注</td>
            <td>1.3-1.4</td>
            <td>150/200</td>
            <td><span class="status in-review">二次复审</span></td>
            <td>9.7</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { taskApi } from '@/api'

const taskList = ref([])

const getTaskList = async () => {
  try {
    const res = await taskApi.getTaskList()
    if (res.code === 200) {
      taskList.value = res.data
    }
  } catch (error) {
    console.error('获取任务列表失败:', error)
  }
}

onMounted(() => {
  getTaskList()
})
</script>

<style scoped>
.task-container {
  background: white;
  border-radius: 4px;
  min-width: 1000px;
}

.task-header {
  padding: 20px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-info {
  flex: 1;
}

.task-title {
  margin-bottom: 15px;
}

.task-title h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.task-meta {
  color: #666;
  font-size: 14px;
}

.task-meta span {
  margin-right: 20px;
}

.task-details {
  color: #666;
  font-size: 14px;
}

.task-details span {
  margin-right: 20px;
}

.start-btn {
  padding: 8px 20px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.task-filter {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #e6e6e6;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group select {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  width: 120px;
}

.search-input {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  width: 200px;
}

.task-table {
  padding: 0 20px 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e6e6e6;
}

th {
  background: #fafafa;
  font-weight: 500;
  color: #333;
}

.status {
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 12px;
}

.status.completed {
  background: #e6f7ff;
  color: #1890ff;
}

.status.in-review {
  background: #fff7e6;
  color: #fa8c16;
}
</style> 